<template>
    <view class="cookbook">
        <view class="cook-item" v-if="Cookbook">
            <view class="cook-top">
                <view><image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/home/cook1.png" mode=""></image>早餐</view>
                <view

                    >{{ Cookbook.breakfastTimeBegin ? Cookbook.breakfastTimeBegin.slice(0, 5) : '' }}～{{
                        Cookbook.breakfastTimeEnd ? Cookbook.breakfastTimeEnd.slice(0, 5) : ''
                    }}</view
                >
            </view>
            <view class="cook-cntent pre">{{
                Cookbook.breakfastFood
            }}</view>
        </view>

        <view class="cook-item" v-if="Cookbook">
            <view class="cook-top">
                <view><image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/home/cook2.png" mode=""></image>午餐</view>
                <view
                    >{{ Cookbook.lunchTimeBegin ? Cookbook.lunchTimeBegin.slice(0, 5) : '' }}～{{
                        Cookbook.lunchTimeEnd ? Cookbook.lunchTimeEnd.slice(0, 5) : ''
                    }}</view
                >
            </view>
            <view class="cook-cntent  pre" >{{
                Cookbook.lunchFood
            }}</view>
        </view>

        <view class="cook-item" v-if="Cookbook">
            <view class="cook-top">
                <view><image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/home/cook3.png" mode=""></image>晚餐</view>
                <view
                    >{{ Cookbook.dinnerTimeBegin ? Cookbook.dinnerTimeBegin.slice(0, 5) : '' }}～{{
                        Cookbook.dinnerTimeEnd ? Cookbook.dinnerTimeEnd.slice(0, 5) : ''
                    }}</view
                >
            </view>
            <view class="cook-cntent pre">{{
                Cookbook.dinnerFood
            }}</view>
        </view>

        <view class="cook-item" v-if="Cookbook">
            <view class="cook-top">
                <view>温馨提示：</view>
            </view>
            <view class="cook-cntent1 pre">{{
                Cookbook.reminder
            }}</view>
        </view>

        <view class="cook-main" v-if="Cookbook">
            <view class="cook-type"
                ><block v-for="(item, index) in tag" :key="index"
                    ><view :class="type == index ? 'on' : ''" @click="tablist(index)">{{ item }}</view></block
                ></view
            >
            <view class="cook_content" v-if="type == 0">
                <view class="cook-birf pre">{{
                    Cookbook.vegetableRecommend
                }}</view>
                <view class="cookType">
                    <block
                        v-if="
                            Cookbook.vegetableRecommendFoodList != null &&
                            Cookbook.vegetableRecommendFoodList.length > 0
                        "
                    >
                        <view
                            class="cook_item"
                            v-for="(item, index) in Cookbook.vegetableRecommendFoodList"
                            :key="index"
                            @click="goCook(item)"
                        >
                            <image
                                style="width: 80rpx; height: 80rpx; border-radius: 8rpx"
                                :src="item.coverAbsolute"
                            ></image>
                            <label
                                style="
                                    display: -webkit-box;
                                    -webkit-box-orient: vertical;
                                    -webkit-line-clamp: 1;
                                    overflow: hidden;
                                "
                                >{{ item.name }}</label
                            >
                        </view>
                    </block>
                    <block v-else-if="isLoad">
                        <view class="redblack-empty">
                            <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/home/artempty.png" mode=""></image>
                            <text>暂无食谱</text>
                        </view>
                    </block>
                </view>
            </view>

            <view class="cook_content" v-if="type == 1">
                <view class="cook-birf pre" >{{
                    Cookbook.meatDishesRecommend
                }}</view>
                <view class="cookType">
                    <block
                        v-if="
                            Cookbook.meatDishesRecommendFoodList != null &&
                            Cookbook.meatDishesRecommendFoodList.length > 0
                        "
                    >
                        <view
                            class="cook_item"
                            v-for="(item, index) in Cookbook.meatDishesRecommendFoodList"
                            :key="index"
                            @click="goCook(item)"
                        >
                            <image
                                style="width: 80rpx; height: 80rpx; border-radius: 8rpx"
                                :src="item.coverAbsolute"
                            ></image>
                            <label
                                style="
                                    display: -webkit-box;
                                    -webkit-box-orient: vertical;
                                    -webkit-line-clamp: 1;
                                    overflow: hidden;
                                "
                                >{{ item.name }}</label
                            >
                        </view>
                    </block>
                    <block v-else-if="isLoad">
                        <view class="redblack-empty">
                            <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/home/artempty.png" mode=""></image>
                            <text>暂无食谱</text>
                        </view>
                    </block>
                </view>
            </view>

            <view class="cook_content" v-if="type == 2">
                <view class="cook-birf pre" >{{
                    Cookbook.fruitsRecommend
                }}</view>
                <view class="cookType">
                    <block
                        v-if="Cookbook.fruitsRecommendFoodList != null && Cookbook.fruitsRecommendFoodList.length > 0"
                    >
                        <view
                            class="cook_item"
                            v-for="(item, index) in Cookbook.fruitsRecommendFoodList"
                            :key="index"
                            @click="goCook(item)"
                        >
                            <image
                                style="width: 80rpx; height: 80rpx; border-radius: 8rpx"
                                :src="item.coverAbsolute"
                            ></image>
                            <label
                                style="
                                    display: -webkit-box;
                                    -webkit-box-orient: vertical;
                                    -webkit-line-clamp: 1;
                                    overflow: hidden;
                                "
                                >{{ item.name }}</label
                            >
                        </view>
                    </block>
                    <block v-else-if="isLoad">
                        <view class="redblack-empty">
                            <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/home/artempty.png" mode=""></image>
                            <text>暂无食谱</text>
                        </view>
                    </block>
                </view>
            </view>

            <view class="cook_content" v-if="type == 3">
                <view class="cook-birf pre">{{
                    Cookbook.tabooRecommend
                }}</view>
                <view class="cookType">
                    <block v-if="Cookbook.tabooRecommendFoodList != null && Cookbook.tabooRecommendFoodList.length > 0">
                        <view
                            class="cook_item"
                            v-for="(item, index) in Cookbook.tabooRecommendFoodList"
                            :key="index"
                            @click="goCook(item)"
                        >
                            <image
                                style="width: 80rpx; height: 80rpx; border-radius: 8rpx"
                                :src="item.coverAbsolute"
                            ></image>
                            <label
                                style="
                                    display: -webkit-box;
                                    -webkit-box-orient: vertical;
                                    -webkit-line-clamp: 1;
                                    overflow: hidden;
                                "
                                >{{ item.name }}</label
                            >
                        </view>
                    </block>
                    <block v-else-if="isLoad">
                        <view class="redblack-empty">
                            <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/home/artempty.png" mode=""></image>
                            <text>暂无食谱</text>
                        </view>
                    </block>
                </view>
            </view>
        </view>

        <view class="redblack-empty" v-if="Cookbook == '' && isLoad" style="margin-top: 50%">
            <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/home/artempty.png" mode=""></image>
            <text>暂无食谱</text>
        </view>

        <view style="height: 20rpx"></view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            tag: ['蔬菜推荐', '肉类推荐', '水果推荐', '禁忌食物'],
            type: 0,
            recommendList: [],
            id: '',
            Cookbook: '',
            isLoad: false,
        };
    },
    onLoad(option) {
        if (option.id) {
            this.id = option.id;
            uni.setNavigationBarTitle({
                title: '食谱详情',
            });
        } else {
            uni.setNavigationBarTitle({
                title: '推荐食谱',
            });
        }
        this.goCookbook();
    },

    methods: {
        goCookbook() {
            if (this.id != '') {
                this.request
                    .httpTokenJsonRequest(`/mp-api/wx/cookbook/details/${this.id}`, null, 'POST', true)
                    .then((res) => {
                        if (res.code == 0) {
                            this.isLoad = true;
                            this.Cookbook = res.data;
                        }
                    });
            } else {
                this.request.httpTokenJsonRequest('/mp-api/wx/cookbook/convention', null, 'POST', false).then((res) => {
                    if (res.code == 0) {
                        this.isLoad = true;
                        this.Cookbook = res.data;
                    }
                });
            }
        },
        tablist(index) {
            this.type = index;
        },
        goCook(item) {
            uni.navigateTo({
                url: `/packageHome/pages/redblack/detail?id=${item.id}`,
            });
        },
    },
};
</script>

<style>
.pre{
    white-space: pre-wrap;
    word-wrap: break-word;
}
</style>
